@layout("/common/_vue_container.html"){
<div id="app" v-cloak v-loading="fullscreenLoading" style="height:100%;">
    <div class="main_content">
        <div v-loading="screenLoading">
            <div class="remind_title2">
                产品类别列表
                <el-button
                        type="primary"
                        size="small"
                        class="product-new-button"
                        v-on:click="toBackProductList"
                >
                    返回产品页
                </el-button>
                <el-button
                        type="primary"
                        size="small"
                        class="product-new-button"
                        v-on:click="toNewDialog"
                >
                    新增
                </el-button>
            </div>
            <el-table ref="singleTable" :data="cateData" style="width: 100%">
                <el-table-column type="index" width="60" property="index">
                </el-table-column>
                <el-table-column property="id" label="id"></el-table-column>
                <el-table-column property="name" label="类别名称">
                </el-table-column>
                <el-table-column property="iconPath" label="图表">
                    <template scope="scope">
                        <img  :src="scope.row.iconPath+'?imageView2/1/w/60/h/60'">
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250">
                    <template scope="scope">
                        <el-button size="small"
                                   v-on:click=toEditDialog(scope.row.id)>编辑
                        </el-button>
                        <el-button size="small"
                                   v-on:click=deleteCate(scope.row.id)>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog title="新增" :visible.sync="dialogNewVisible">
        <div>
            <span style="display:inline-block;font-size: 16px; margin: 6px 0;">类别名称：</span>
            <el-input
                    placeholder="请输入内容"
                    v-model="newCate.name"
                    clearable>
            </el-input>
        </div>
        <div>
            <span style="display:inline-block;font-size: 16px;margin: 6px 0;">类别图标：</span>
            <el-upload
                    class="avatar-uploader"
                    action="${ctxPath}/cash/uploadFile"
                    :show-file-list="false"
                    :on-progress="handleAvatarProcess"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="iconImgUrl" :src="iconImgUrl" class="avatar">
                <div v-else>
                    <el-progress v-if="onProcess" type="circle" :percentage="uploadPercent">
                    </el-progress>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
            </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogNewVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="confirmCreate()">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogUpdateVisible">
        <div>
            <span style="display:inline-block;font-size: 16px; margin: 6px 0;">类别名称：</span>
            <el-input
                    placeholder="请输入内容"
                    v-model="updateCate.name"
                    clearable>
            </el-input>
        </div>
        <div>
            <span style="display:inline-block;font-size: 16px;margin: 6px 0;">类别图标：</span>
            <el-upload
                    class="avatar-uploader"
                    action="${ctxPath}/cash/uploadFile"
                    :show-file-list="false"
                    :on-progress="handleAvatarProcess"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="iconImgUrl" :src="iconImgUrl" class="avatar">
                <div v-else>
                    <el-progress v-if="onProcess" type="circle" :percentage="uploadPercent">
                    </el-progress>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
            </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogUpdateVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="confirmUpdate()">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="删除确认" :visible.sync="dialogDeleteVisible">
        <div class="user-status-dialog-text">
            确定删除该类别？
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogDeleteVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="confirmDelete()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="${ctxPath}/static/modular/cash/cate/cate_list.js"></script>
@}

